<template>
  <div class="measurement">
    <ConTitle :info="info"></ConTitle>
    <el-card class="box-card">
      <div class="clearfix">
        <!-- 表单 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="测量名称" prop="name">
            <el-input type="text" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="测量单位" prop="unit">
            <el-input type="text" v-model="ruleForm.unit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">确认</el-button>
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $testAdd, $testEdit } from "@/api/index";
export default {
  name: "AccountMsg",
  data() {
    return {
      info: {
        path: "子账号/",
        text: "账户信息",
        msg: "-可添加当前组织的子账号，并为其分配权限。",
      },
      ruleForm: {
        name: "",
        unit: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入测量类型名称", trigger: "blur" },
        ],
        unit: [
          { required: true, message: "请输入测量类型单位", trigger: "blur" },
        ],
      },
      editId: "", //空 代表添加   ，非空 就是修改
      cTime: 0, //创建时间
    };
  },
  components: {
    ConTitle,
  },
  mounted() {
    console.log(this.$route.query);
    let { id, name, unit, cTime } = this.$route.query;
    if (id) {
      this.ruleForm.name = name;
      this.ruleForm.unit = unit;
      this.info.text = "修改测量类型";
      this.editId = id;
      this.cTime = cTime;
    }
  },
  watch: {
    $route({ query }) {
      console.log(query);
      if (query) {
        this.ruleForm.name = "";
        this.ruleForm.unit = "";
        this.info.text = "添加测量类型";
        this.editId = "";
      }
    },
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 判断是添加还是修改
          if (this.editId == "") {
            //添加操作
            // 调用添加接口
            $testAdd(this.ruleForm).then((res) => {
              console.log(res);
              if (res.data.msg == "success") {
                this.$message({
                  message: "恭喜你，添加了一种测量类型",
                  type: "success",
                  duration: 500,
                });
              }
            });
          } else {
            //修改操作
            // 调用修改接口
            $testEdit({
              id: this.editId,
              cTime: +this.cTime,
              ...this.ruleForm,
            }).then((res) => {
              console.log(res);
              if (res.data.msg == "success") {
                this.$message({
                  message: "恭喜你，修改了一种测量类型",
                  type: "success",
                  duration: 500,
                });
              }
            });
          }

          // 页面跳转到列表页
          this.$router.push("/test/testlist");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      // 清空表单
      this.ruleForm.name = "";
      this.ruleForm.unit = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.measurement {
  padding: 10px;
  .box-card {
    margin-top: 10px;
  }
}
</style>